<template>
    <mi-form-page @submit="submit"
                  :loading="edit.loading"
                  title="会员等级编辑"
                  v-model:show="edit.show"
    >
        <el-form :model="edit.info"
                 ref="formRef"
                 :rules="rules">

            <el-form-item prop="title" label="等级名称">
                <mi-input v-model="edit.info.title" />
            </el-form-item>

            <el-form-item prop="grade" label="等级">
                <mi-input-number v-model="edit.info.grade" />
                <mi-form-aux>决定等级的排序高低</mi-form-aux>
            </el-form-item>

            <el-form-item prop="title" label="等级图标">
                <mi-up-image v-model="edit.info.title" />
            </el-form-item>

            <el-form-item prop="image" label="等级背景图">
                <mi-up-image v-model="edit.info.image" />
            </el-form-item>

            <el-form-item prop="growth" label="成长值">
                <mi-input-number v-model="edit.info.growth" />
            </el-form-item>

            <el-form-item prop="discount" label="折扣">
                <mi-input v-model="edit.info.discount" />
                <mi-form-aux>折扣率范围 0-100，80代表打8折，0和100都代表不折扣</mi-form-aux>
            </el-form-item>

        </el-form>
    </mi-form-page>
</template>

<script setup lang="ts">
import {reactive, watch, ref, onBeforeMount, inject} from "vue";
import {makeModelAuth} from "@/utils/auth";
import List from "@/model/list";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import {simpleGet, simplePost} from "@/utils/request";

const formRef = ref<FormInstance>()
const auth = makeModelAuth("site.userLevel")
const rules = {
    title:[{required:true, message:'必填'}],
    username:[{required:true, message:'必填'}],
    mobile:[{required:true, message:'必填'}],
}

const list = inject<List>("list")
const edit = inject<Edit>("edit", new Edit({}))

const submit = () => {
    let url = '/' + (edit.info.id ? auth.edit : auth.add)

    edit.submit({
        formRef: formRef.value,
        url: url,
        list: list
    })
}



watch(() => edit.show, (nv, ov) => {
    if (!nv) return;
    edit.init(async () => {
        const id = edit.info.id
        if (id){
            // 请求表单数据
            let res = await simpleGet('/' + auth.edit, {id:id})
            edit.info = res.info
        }else{
            edit.info = {
                apply_type: 1,
                is_show:1,
            }
        }
    })
})

</script>

<style scoped>

</style>
